<template>
  <div class="mirror-tab1">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column  v-if="subtype == '0'" label="本地网" prop="areaName" min-width="90"></el-table-column>

        <el-table-column  v-if="subtype == '1'" label="分类" prop="dataType" min-width="90"></el-table-column>
        <el-table-column  v-if="subtype == '1'" label="地市" prop="localName" min-width="90"></el-table-column>
        <el-table-column
          
          v-if="subtype == '1'"
          label="县(市)分公司/分局"
          prop="areaName"
          min-width="130"
        ></el-table-column>
        <!-- <el-table-column label="收入增长(40%)">
          <el-table-column label="主营收入同比增长率" min-width="160" prop="val0"></el-table-column>
          <el-table-column label="码号级收入同比增长率" min-width="160" prop="val1"></el-table-column>
          <el-table-column label="产业数字化收入拉动主营贡献" min-width="180" prop="val2"></el-table-column>
          <el-table-column label="台阶收入环比增长率" min-width="160" prop="val3"></el-table-column>
          <el-table-column label="应收账款占收比" min-width="160" prop="val4"></el-table-column>
        </el-table-column>

        <el-table-column label="规模发展(20%)">
          <el-table-column label="移动用户增长率" min-width="120" prop="val5"></el-table-column>
          <el-table-column label="宽带用户增长率" min-width="120" prop="val6"></el-table-column>
          <el-table-column label="5G用户(8%)" min-width="120">
                <el-table-column label="5G套餐渗透率" min-width="120" prop="val7"></el-table-column>
                <el-table-column label="年度变动" min-width="120" prop="val8"></el-table-column>
                <el-table-column label="5G终端渗透率" min-width="120" prop="val9"></el-table-column>
                <el-table-column label="年度变动" min-width="120" prop="val10"></el-table-column>
          </el-table-column>
          <el-table-column label="融合发展(9%)" min-width="120">
                <el-table-column label="融合主卡增长率" min-width="120" prop="val11"></el-table-column>
                <el-table-column label="169及以上融合高套较上年末增长率" min-width="220" prop="val12"></el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column label="用户质态(20%)">
         <el-table-column label="融合质态(5%)" min-width="120">
                <el-table-column label="129及以上融合211占比" min-width="140" prop="val13"></el-table-column>
                <el-table-column label="129及以上融合211占比年度变动" min-width="220" prop="val14"></el-table-column>
          </el-table-column>
          <el-table-column label="移动用户活跃率">
            <el-table-column label="到达" prop="val15"></el-table-column>
            <el-table-column label="年度变动" prop="val16"></el-table-column>
          </el-table-column>
          <el-table-column label="宽带用户活跃率">
            <el-table-column label="到达" prop="val17"></el-table-column>
            <el-table-column label="年度变动" prop="val18"></el-table-column>
          </el-table-column>
          <el-table-column label="天翼高清活跃率">
            <el-table-column label="到达" prop="val19"></el-table-column>
            <el-table-column label="年度变动" prop="val20"></el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column label="客户经营(20%)">
          <el-table-column label="存存量收入保有率">
            <el-table-column label="保有率" prop="val21"></el-table-column>
            <el-table-column label="与目标差距" min-width="120" prop="val22"></el-table-column>
          </el-table-column>
          <el-table-column label="存增量收入保有率">
            <el-table-column label="保有率" prop="val23"></el-table-column>
            <el-table-column label="与目标差距" min-width="120" prop="val24"></el-table-column>
          </el-table-column>
          <el-table-column label="存量客户保有率" prop="val25"></el-table-column>
          <el-table-column label="客户融合度" prop="val26"></el-table-column>
          <el-table-column label="移动用户月均离网率" prop="val27"></el-table-column>
          <el-table-column label="宽带用户月均离网率" prop="val28"></el-table-column>
        </el-table-column>
        <el-table-column label="合计" prop="val29"></el-table-column>
        <el-table-column label="排名" prop="val30"></el-table-column> -->
        <el-table-column v-for="(item, i) in titles" :key="'t' + i" :label="item.label" :prop="'val' + item.prop" >
            <el-table-column v-for="(it, index) in item.sec" :key="index" :prop="'val' + it.indexId" :label="it.label" >
                <el-table-column min-width="120" v-for="(it2, index2) in it.origin" :key="'t3' + index2 " :label="it2.indexType3" :prop="'val' + it2.indexId"></el-table-column>
            </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "score-tab3",
  props: ["rowData2", "rawTime"],
  data() {
    return {
      tableData: [],
      tableLoading: false,
      spanArr: null,
      year: "",
      month: "",
      time: {},
      title1: [],
      title2: [],
      title3: [],
      subtype: "0",
      titles: [],
    };
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 && this.subtype == "1") {
        return this.spanArr && this.spanArr[rowIndex][columnIndex];
      }
    },

    init() {
      let that = this,
        year = that.rawTime.year,
        month = that.rawTime.month,
        type = that.rawTime.type;

      that.year = +year;
      that.month = month;
      that.tableLoading = !0;
      that.tableData = [];
      that.titles = [];
      !that.rowData2.data.length ? that.tableData = [] : (that.rowData2.data.map(it => {
          it.dataList.map((item, i) => {
            it['val' + (i + 1)] = item;
          })
      }), that.tableData = that.rowData2.data);
      // that.tableData = that.rowData2.data;
      that.subtype = type;
      
      that.titles = that.mergeTitles(that.rowData2.titles, 'indexType1')
      that.titles.map( (it, i) => {
          it['sec'] = that.mergeTitles(it.origin, 'indexType2')
      })
      if (type == "1" && that.rowData2 && that.rowData2.data.length) {
        that.spanArr = mergeSpan(that.rowData2.data, ["dataType"]);
      }

      that.titles.slice(-2).map(it=>{
        it.sec = [];
      })

      that.$nextTick(() => {
        that.tableLoading = false;
        that.$refs.table.doLayout();
      });
    },
    mergeTitles(data, type) {
            let tempArr = [];
            let afterData = [];
            for (let i = 0; i < data.length; i++) {
                if (tempArr.indexOf(data[i][type]) === -1) {
                afterData.push({
                    label: data[i][type],
                    prop: data[i].indexId,
                    origin: [data[i]]
                });
                tempArr.push(data[i][type]);
            } else {
                    for (let j = 0; j < afterData.length; j++) {
                        if (afterData[j].label == data[i][type]) {
                            afterData[j].origin.push(data[i]);
                            break;
                        }
                    }
                }    
            }
            return afterData;
        },
        afterData(val) {
            let tempArr = [];
            let afterData = [];
            for (let i = 0; i < val.length; i++) {
                if (tempArr.indexOf(val[i].indexType1) === -1) {
                    afterData.push({
                        label: val[i].indexType1,
                        origin: [val[i]]
                    });
                    tempArr.push(val[i].indexType1);
                } else {
                    for (let j = 0; j < afterData.length; j++) {
                        if (afterData[j].indexType1 == val[i].indexType1) {
                            afterData[j].origin.push(val[i]);
                            break;
                        }
                    }
                }
            }
            return afterData;
        },
  },
};
</script>

<style lang="scss">
.mirror-tab1 {
  .cell {
    text-align: center;
  }
}
</style>